import React, {Component} from 'react';
import {Layout, Icon} from 'antd';

import routes from '../../routes/config';

import './siderCustom.less';


class MaskComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      menuData: this.props.otherData && this.props.otherData.length > 0 ?
        this.props.otherData.concat(routes.menus) : routes.menus,
    }
  }


  state = {
    isShow: this.props.isShow
  };

  componentWillReceiveProps(nextProps) {
    this.setState({
      isShow: nextProps.isShow,
    })
  }

  click = (selectedKey) => {
    this.state.menuData.map((item,index)=>{
      if (item.subs && item.subs.length > 0) {
        item.subs.map(i=>{
          if(i.key ===selectedKey){
            this.setState({
              isShow: false,
            }, () => this.props.onClick
              && this.props.onClick({selectedKey: item.key,maskMenuSelectKey:selectedKey}))
            return;
          }
        })
      }
    })
  }

  isShowMask = (flag) => {
    if(flag!==this.state.isShow){
      this.setState({
          isShow: flag,
        },()=>(!flag)&&this.props.leaveMask&&this.props.leaveMask()
      )
    }
  }

  _renderMenu = () => {
    return this.state.menuData.map((item,index) => {
      if (item.subs && item.subs.length > 0) {
        return (
          <li
            key={index}
            className="row flex-box">
            <div className="left">
              <span>{item.title}</span>
              <Icon type="right" theme="outlined"/>
            </div>
            <div className="line"/>
            <div className="right flex">
              {
                item.subs && item.subs.map((subs) => {
                  const maskMenuSelectKey = this.props.maskMenuSelectKey;
                  return (
                    <span
                      key={subs.key}
                      className={maskMenuSelectKey === subs.key ? "active" : null}
                      onClick={() => this.click(subs.key)}>{subs.title}</span>
                  )
                })
              }
            </div>
          </li>
        )
      }
    })
  }

  render() {
    return (
      <div className='indexMaskComponent-container' style={{display: this.state.isShow ? 'block' : 'none'}}
           onMouseLeave={this.isShowMask.bind(this, false)}
      >
        <ul>
          {this._renderMenu()}
        </ul>
      </div>
    )
  }
}

export default MaskComponent;
